<template>
    <div class="banner">
        <el-carousel height="520px" :interval="3000" arrow="always">
            <el-carousel-item v-for="banner in bannerList " :key="banner.name" >
                <router-link :to="banner.link">
                <img :src="banner.image" alt="">
                    </router-link>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
    export default {
        name: "banner",
        data(){
           return{
               bannerList:[]
           }
        },
        created(){
            this.$axios({
                url:this.$settings.base_url+'/home/banners/',

            }).then(response => {
                this.bannerList=response.data
            })
        }
    }
</script>

<style scoped>
.el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item img {
        text-align: center;
        height: 520px;
        margin: 0 auto;
        display: block;


    }

</style>